<template>
	<!-- 主题讨论 抢答 点名 投票 随堂测试 -->
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
				<view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='fd0_0_c1_c0_ibhf'>{{name}}</text>
				</view>
				<view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="hp"></view>
		<view class="content">
			<view class='flex flex-wrap align-center justify-between fd1_1_c0_ibhf'>
				<view class='flex flex-direction flex-wrap align-stretch justify-between flex-sub ' style=" position: relative;">
					<view  class="fd1_1_c0_c0_c0_ibhf flex">{{infos.classroomactivities_name}} </view>
					<view v-if="name!='点名'">限时：{{infos.classroomactivities_limited_time}}{{infos.classroomactivities_time_type_name}}</view>
					<view>班级：{{infos.teachingclass_name}}</view>
					<view>创建人：{{infos.create_id_name}}</view>
					<view>开始时间：{{infos.start_time}}</view>
					<view  v-if="infos.end_time" >结束时间：{{infos.end_time}}</view>
					<image class="ztimg"   v-if="infos.activity_status=='ing'" :src='STATIC_URL+"ztimg.png"' mode=""></image>
					<view class="zttext" v-if="infos.activity_status=='ing'">进行中</view>
					<image class="ztimg"  v-if="infos.activity_status=='end'" :src='STATIC_URL+"ztimgs.png"' mode=""></image>
					<view class="zttext"  v-if="infos.activity_status=='end'">已结束</view>
				</view>
			</view>
			
			<!-- 主题讨论 -->
			<view class="zttl" >
				<view class="hp"> </view>
				<view class="title " >
					<view class="left flex" v-if="name!='点名'">
						<view class=""> 已参与：<text style="color: #1C5EFC;">{{infos.joined_count}}</text>人 </view>
						<view style="margin-left: 32rpx;"> 未参与：<text style="color: #F93335;">{{infos.not_joined_count}}</text>人 </view>
						<view class="right tj" v-if="name=='投票' ||name=='随堂测试' " @tap.stop="jumptj()"> 统计 </view>
						<view class="right" v-else @tap.stop="jumpstatus()"> 未参与学生 </view>
					</view>
					<view class="left flex" v-if="name=='点名'">
						<view class=""> 已选择：<text style="color: #1C5EFC;">{{list.length}}</text>人 </view>
					</view>
				</view>
			</view>
			<view class="lists " v-if="name=='主题讨论'">
				<view class="item" v-for="(item,index) in list" :key='index' :class="item.check?'se':''" v-if="list.length > 0 && isok">
					<view class="user">
						<image class="checkimg" @tap.stop="checkitem(index)" :src='item.check?STATIC_URL+"1671.png":STATIC_URL+"16002.png"' mode=""></image>
						<image class="imgs"  :src='item.avatar?item.avatar:STATIC_URL+"LOGO.png"' mode="aspectFill"></image>
						<view class="name maxw hid1"> {{item.user_real_name}} </view>
					</view>
					<view class="info"  :class="!item.check?'shadow':''">
						<image class="tlbj" src="/static/images/tlbj2.png" mode=""></image>
						<view class="infos">
							<view class="names">{{item.answer}}</view>
							<view class="bttom flex">
								<view class="time"> {{item.create_time}}</view>
								<view class="zt" v-if="item.review_status==1"> 已评分：{{item.score}}分</view>
								<view class="pf" v-else @tap.stop="openitem(item)">评分</view>
							</view>
						</view>
					</view>
				</view>
				<view class="imhs" v-if="list.length==0 && isok">
					<image class="" src="/static/images/none.png" mode=""></image>
					<view class="">
						暂无数据
					</view>
				</view>
			
			</view>
			<!-- 抢答 点名 选人-->
			<view class="lists" v-if="name=='抢答' || name=='点名'">
				<view class="items flex"  :class="item.check?'se':''" v-for="(item,index2) in list" :key="index2">
					<view class="users ">
						<image class="checkimg" @tap.stop="checkitem(index2)" :src='item.check?STATIC_URL+"1671.png":STATIC_URL+"16002.png"' mode=""></image>
						<image class="imgs"  :src='item.avatar?item.avatar:STATIC_URL+"LOGO.png"' mode="aspectFill"></image>
						<view class="name maxw hid1" :class="name=='点名'?'maxs':''"> {{item.user_real_name}} </view>
					</view>
					<view class="time  " v-if="name=='抢答'"> 用时：{{item.use_time}}s </view>
					<view class="score">
						<view class="zt" v-if="item.score"> 已评分：{{item.score}}分</view>
						<view class="pf" v-if="!item.score" @tap.stop="openitem(item)">评分</view>
					</view>
				</view>
			</view>
			<view class="lists" v-if="name=='投票' ">
				<view class="select-item" style="padding: 0 24rpx;" @tap.stop="jumpdetails(item)"  v-for="(item,index3) in list" :key="index3">
					<view class="item-name"> {{item.name}}、{{item.options}} </view>
					<view style="display: flex; align-items: center; justify-content: space-between;margin-top: 16rpx;">
						<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
							<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
								:style="{ width: item.rate * 100 + '%' }">
							</view>
						</view>
						<view class="yuan" style="color: #1C5EFC;">{{item.num}}人</view>
						<view class="yuan">{{item.rate * 100}}%</view>
						<!-- <image v-else style="width: 40rpx;height: 40rpx;" src="@/static/sign/dui.png" mode="">
						</image> -->
					</view>
				</view>
				
			</view>
			<!-- 随堂测试 -->
			<view class="cstitle" v-if="name=='随堂测试'">
				<view class="cstop">
					<view class="number">第{{questionindex +1}}题 </view>
					<view class="type"> {{questioninfo.question_type=='radio'?'单选':questioninfo.question_type=='selected'?'多选':questioninfo.question_type=='short'?'简答':questioninfo.question_type=='cloze'?'填空':'判断'}}</view>
					<view class="allnum" style="margin-left: auto;">共{{arrlist.length}}题 </view>
				</view>
				<view class="csname" v-html="questioninfo.question_title">
					<!-- {{questioninfo.name}} -->
				</view>
				<view class="left flex" >
					<view class=""> 已答：<text style="color: #1C5EFC;">{{questioninfo.joined_count}}</text>人 </view>
					<view style="margin-left: 32rpx;"> 未答：<text style="color: #F93335;">{{questioninfo.not_joined_count}}</text>人 </view>
					<view class="details" style="margin-left: auto;color: #145EFD;" @tap.stop="jumptitle(questioninfo)">
						<text>详情</text>
						<text class='fu-iconfont2  fb_fd4_0_c2_ibhf'>&#xe7f2;</text>
					</view>
				</view>
			</view>
			<view class="lists" v-if="name=='随堂测试'">
				<view class="select-item" style="padding: 0 24rpx;" @tap.stop="jumpdetails(item)"  v-for="(item,index4) in lists" :key="index4" v-if="questioninfo.question_type=='selected'|| questioninfo.question_type=='radio'||questioninfo.question_type=='torf'">
					<view class="item-name flex" > {{item.label}}、<text v-html="item.value"></text> </view>
					<view style="display: flex; align-items: center; justify-content: space-between;margin-top: 16rpx;">
						<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
							<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
								:style="{ width: item.rate * 100 + '%' }">
							</view>
						</view>
						<view class="yuan" style="color: #1C5EFC;">{{item.num}}人</view>
						<view class="yuan">{{item.rate * 100}}%</view>
						<!-- <image v-else style="width: 40rpx;height: 40rpx;" src="@/static/sign/dui.png" mode="">
						</image> -->
					</view>
				</view>
				<!-- 单多选判断 -->
				<view class="daan flex" v-if="name=='随堂测试' && (questioninfo.question_type=='selected'|| questioninfo.question_type=='radio' || questioninfo.question_type=='torf')">
					<view class="" style="margin: 32rpx 0;"> 正确答案：{{getIte(questioninfo.question_type,questioninfo.answer)}}</view>
					<view style="margin-left: 60rpx;"> 正确率：{{questioninfo.accuracy_rate}}% </view>
				</view>
				<!-- 填空的 -->
				<view class="daan flex" v-if="name=='随堂测试'&& questioninfo.question_type=='cloze' ">
					<view style="margin: 32rpx 0;"> 正确答案：</view>
					<view > {{questioninfo.answer}}</view>
				</view>
				<!-- 简答的 -->
				<view class="daan " v-if="name=='随堂测试'&& questioninfo.question_type=='short' ">
					<view style="margin: 32rpx 0;"> 答案解析：</view>
					<view v-html="questioninfo.question_analysis"> </view>
				</view>
			</view>
			<view class="flex benben-position-layout flex flex-wrap align-center jf_flex_2_ibhf" v-if="name!='投票' && name!='随堂测试'">
				<view class='flex flex-wrap align-center' @tap.stop="checkall">
					<image class='jf_fd2_0_c0_ibhf' mode="aspectFit" :src='allcheck?STATIC_URL+"1671.png":STATIC_URL+"16002.png"'></image>
					<text class='jf_fd2_0_c1_ibhf' >{{!allcheck?'全选':'取消全选'}}</text>
					<text class="checknum" v-if="checknum>0">（已选：{{checknum}} 人）</text>
				</view>
				<button class='jf_fd2_1_ibhf'  @tap.stop="openall">批量评分</button>

			</view>
			<view class="flex benben-position-layout flex flex-wrap align-center jf_flex_2_ibhf" v-if="name=='随堂测试'">
				<button class='jf_fd2_1_ibhf1'  @tap.stop="up" v-if="questionindex!=0">上一题</button>
				<button class='jf_fd2_1_ibhf'  @tap.stop="next" v-if="arrlist.length != questionindex + 1">下一题</button>
				<!-- v-if="questionindex != list.length" -->
			
			</view>
			
			<view :style="{height: '190rpx'}"></view>
			
			
			
			<!--选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker4"  @change="sureFunc()"  :visible.sync="pickerDiy1763618496046" :label.sync='checkname' :value.sync='checkid' :options='corelist' mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
			    <template #picker-header>
			        <view class='flex flex-wrap align-center justify-between zy_picker4_0_ibhf'>
			            <text class='zy_picker4_0_c0_ibhf' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
			            <text class='zy_picker4_0_c1_ibhf'>评分</text>
			            <text class='zy_picker4_0_c2_ibhf' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
			        </view>
			    </template>
			</benben-picker>
			<!--选择器结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '主题讨论',
				popupShow1758159673073: false,
				inputname: '输入1-100',
				inputone: '',
				aid:'',//
				infos:{},
				listyxt:[{question_type_name:'简答题',question_title:'探讨人工智能在教育行业的应用现状与未来趋势。'},
				{question_type_name:'判断题',question_title:'探讨人工智能在教育行业的应用现状与未来趋势。'}],
				"pickerDiy1763618496046": false,
				"corelist": [],
				"checkname": "",
				"checkid": "",
				selectId:1,
				arrlist:[],
				list:[],
				questioninfo:{},//随堂测当前题目信息
				questionindex:0,//随堂测当前题目下标
				lists:[{name:'A',options:'人工智能是研究世界运行规律的科学',rate:0.2,num:3,},{name:'B',options:'人工智能涵盖多个学科领域',rate:0.1,num:3,}],//随堂测当前题目选项
				allcheck:false,//是否全选
				checknum:'',//选中的数量
				uuid:'',//选中的id
				isok:false,
				homeworkreleaserecord_id:'',//随堂测查看某学生答题情况需要
				homework_id:'',//随堂测查看某学生答题情况需要
			}
		},
		onLoad(option) {
			this.name = option.name
			this.aid=option.aid
			//评分范围值
			this.getscore()
			// 获取活动信息
			this.getinfo()
			
		},
		methods: {
				//评分范围值
			getscore(){
				const arr2 = [...Array(21).keys()].map(i => ({
				  name: (i - 10).toString()
				}));
				this.corelist=arr2
			},
			async getinfo(){
				this.getdetail()
				let res = await this.$api.post(global.apiUrls.post691e8e86851a5, {
					aid: this.aid,
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.infos=res.data.data
			},
			// 获取活动信息
			async getdetail(type){
				this.isok=false
				let url=''
				let obj={
					activitieslog_id: this.aid,
				}
				if(this.name=='投票'){
					url=global.apiUrls.post691a926867a8d
				}else if(this.name=='主题讨论'){
					url=global.apiUrls.post67178efd90737
				}else if(this.name=='抢答'){
					url=global.apiUrls.post68bfd17c85fef
				}else if(this.name=='点名'){
					url=global.apiUrls.post692424d8b1424
				}else if(this.name=='随堂测试'){
					url=global.apiUrls.post6926705e6693d
					obj={classroomactivitieslog_id:this.aid}
				}
				let res = await this.$api.post(url, obj);
			
				this.isok=true
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					uni.navigateBack()
					return
				}
				if(this.name=='随堂测试'){
					if(res.data.data.list.length==0){
						this.list=[]
						this.arrlist=[]
						return
					}
				}else{
					if(res.data.data.length==0){
						this.list=[]
						this.checkzt()
						return
					}
				}
				
				this.list=res.data.data
				if(this.name=='随堂测试'){
					this.homework_id=this.list.info.homework_id
					this.homeworkreleaserecord_id=this.list.info.homeworkreleaserecord_id
					console.log(this.list)
					this.arrlist=this.list.list
					this.getstclist(0)
				}else{
					this.checkzt()
				}
			},
			getstclist(index){
				this.questioninfo=this.list.list[index]
				this.lists=this.questioninfo.question_options
				this.questioninfo.answer=''
				if(this.questioninfo.question_type=='selected' ||this.questioninfo.question_type=='radio' || this.questioninfo.question_type=='torf'){
					this.questioninfo.answer=this.questioninfo.question_value
				}else if(this.questioninfo.question_type=='cloze'){
					this.questioninfo.question_value.map(item=>{
						this.questioninfo.answer+=item+' '
					})
					console.log(this.questioninfo.answer)
				}
				this.questionindex=index
			},
		
				
			// 全选
			checkall(){
				this.allcheck=!this.allcheck
				let num=0
				this.list.map(item=>{
					item.check=this.allcheck
					if(item.check){
						num++
					}
				})
				this.checknum=num
				
			},
			// 单个选择
			checkitem(index){
				this.list[index].check=!this.list[index].check
				this.checkzt()
			},
			checkzt(){
				let st=true
				let num=0
				if(this.list.length==0){
					this.allcheck=false
					this.checknum=''
					return
				}
				this.list.map(item=>{
					console.log(item.check)
					if(!item.check){
						 st=false
					}
					if(item.check){
						num++
					}
				})
				this.allcheck=st
				console.log(this.allcheck)
				this.checknum=num
				console.log(this.checknum)
			},
			openitem(item){
				this.uuid=item.aid
				this.pickerDiy1763618496046=true
			},
			openall(){
				let aid=''
				this.list.map(item=>{
					if(item.check){
						aid+=item.aid+','
					}
				})
				if(aid){
					this.uuid=aid
					this.uuid=this.uuid.slice(0, -1)
					this.pickerDiy1763618496046=true
					
				}else{
					this.$message.info('请选择要评分的学生')
				}
			},
			// 下一道
			next(){
				this.questionindex++
				this.getstclist(this.questionindex)
			},
			// 上一道
			up(){
				this.questionindex--
				this.getstclist(this.questionindex)
			},
			// 主题讨论 抢答 点名评分
			async sureFunc() {
				console.log(this.checkname)
				console.log(this.uuid)
				let url=''
				if(this.name=='主题讨论'){
					url=global.apiUrls.post691bcefe3ef2b
					
				}else if(this.name=='抢答'){
					url=global.apiUrls.post6916eea0acca9
				
				}else if(this.name=='点名'){
					url=global.apiUrls.post692429537c4df
				}
				let res = await this.$api.post(url, {
					aid: this.uuid,
				    score: this.checkname
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.allcheck=false
				this.checknum=''
				if(this.name=='主题讨论'){
					this.gettldetail()
				}else if(this.name=='抢答'){
					this.getqddetail()
				}else if(this.name=='点名'){
					this.getdmdetail()
				}
				
			},
			
			// 单多选判断
			getIte(type, input) {
				const map = ['A', 'B', 'C', 'D', 'E']
				let arr = []
				console.log(input)
				if(!input){
					return '未答'
				}else{
					if (typeof input === 'string') {
						console.log('string')
						let str = input.trim()
						console.log(str)
						// 替换掉中文符号
						str = str
							.replace(/，/g, ',')
							.replace(/[“”]/g, '"')
							.replace(/'/g, '"')
					
						try {
							// 多尝试几层解析
							let parsed = str
							while (typeof parsed === 'string' && parsed.includes('[')) {
								parsed = JSON.parse(parsed)
							}
					
							if (Array.isArray(parsed)) {
								arr = parsed.map(i => Number(i))
							} else if (!isNaN(parsed)) {
								arr = [Number(parsed)]
							}
						} catch (e) {
					
							if (str.includes(',')) {
								arr = str.split(',').map(i => Number(i.trim()))
							} else if (!isNaN(str)) {
								arr = [Number(str)]
							}
						}
					} else if (Array.isArray(input)) {
						console.log('arr')
						arr = input.map(i => Number(i))
					} else if (typeof input === 'number') {
						console.log('number')
						arr = [input]
					}
					
					return arr.map(i => map[i] ?? '').join('')
				}
				
			},
			// 查看未参加学生
			jumpstatus(){
				uni.navigateTo({
					url:'/pages/activity/studentList/studentList?aid='+this.aid+'&name='+this.name
				})
			},
			// 查看统计
			jumptj(){
				if(this.name=='随堂测试'){
					uni.navigateTo({
						url:'/pages/activity/tj/tj?name='+this.name+'&aid='+this.aid+'&homework_id='+this.homework_id+'&homeworkreleaserecord_id='+this.homeworkreleaserecord_id
					})
					return
				}
				uni.navigateTo({
					url:'/pages/activity/tj/tj?name='+this.name+'&aid='+this.aid
				})
			},
			// 跳转选项详情
			jumpdetails(item){
				if(this.name!='随堂测试'){
					uni.navigateTo({
						url:'/pages/activity/option/option?aid='+this.aid+'&name='+item.name+'&options='+item.options
					})
				}
				
			},
			//跳转单道题详情
			jumptitle(item){
				let types=item.question_type== 'radio' ? 1 : item.question_type == 'selected' ? 2 : item.question_type == 'torf' ? 3 : item.question_type == 'cloze' ? 5 : 4
				uni.navigateTo({
					url:'/pages/activity/titledetail/titledetail?aid='+this.aid+'&types='+types+'&question_id='+item.homeworkquestionmapping_question_id+'&not_join='+item.not_joined_count+'&join='+item.joined_count
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;
		.hp{
			width: 100%;
			height: 24rpx;
			background-color: #F3F4F8;
		}
		.flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}

			.fd0_0_c0_ibhf {
				width: 120rpx;

				.fd0_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
				}
			}
		}

		.content {
			// margin-top: 32rpx;
			background-color: #fff;

			.fd1_1_c0_ibhf {

				// border-bottom: 1px solid #eee;
				border-radius: 16rpx;
				// margin-top: 24rpx;
				padding: 32rpx 24rpx 0 24rpx;
				color: #999999;
				font-size: 24rpx;

				view {
					margin-bottom: 20rpx;
				}
				.ztimg{
					position: absolute;
					top: -32rpx;
					right: -24rpx;
					width: 116rpx;
					height: 48rpx;
				}
				.zttext{
					position: absolute;
					top: -32rpx;
					right: -24rpx;
					width: 116rpx;
					height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					font-style: normal;
					text-transform: none;
					z-index: 6;
				}
				.fd1_1_c0_c0_c0_ibhf {
					font-size: 32rpx;
					color: #333333;
					margin: 0rpx 0rpx 40rpx 0rpx;
				}
			}

			

			.tmlist {
				border-top: 1rpx solid #eeeeee;

				.title {
					color: #1C5EFC;
					padding: 24rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.list_fd2_0_ibhf {
					// margin: 24rpx;
					padding: 24rpx;
					// background-color: #ffffff;
					border-bottom: 1px solid #eee;
					// border-radius: 16rpx;
					margin-bottom: 24rpx;
				
					.list_fd2_0_c0_ibhf {
						margin: 0rpx 0rpx 12rpx 0rpx;
				
						.list_fd2_0_c0_c1_ibhf {
							background: #5695F7;
							height: 40rpx;
							border-radius: 8rpx;
							padding: 0rpx 10rpx 0rpx 10rpx;
							margin: 0rpx 0rpx 0rpx 20rpx;
				
							.list_fd2_0_c0_c1_c0_ibhf {
								color: #ffffff;
								font-size: 24rpx;
								line-height: 40rpx;
							}
						}
					}
				}
			}

		}
		.zttl{
			.hp{
				height: 24rpx;
				background-color: #F3F4F8;
				width: 100%;
			}
			.title{
				width: 100%;
				height: 72rpx;
				background: #FBFBFB;
				border-radius: 0px 0px 0px 0px;
				padding:14rpx 24rpx;
				.left{
					
					height: 44rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.right{
					width: 132rpx;
					height: 44rpx;
					text-align: center;
					font-size: 24rpx;
					background: #145EFD;
					border-radius: 8rpx;
					color: #fff;
					margin-left: auto;
				}
				.tj{
					width: 88rpx;
				}
			}
			
		}
		.lists{
			width: 100%;
			padding-bottom: 36rpx;
			background-color: #ffffff;
			.item{
				padding: 36rpx 24rpx;
				// margin-bottom: 52rpx;
				display: flex;
			}
			.se{
				background-color:#F2F7FF ;
			}
			.user{
				text-align: center;
				.checkimg{
					margin-top:35rpx;
					width: 36rpx;
					height: 36rpx;
					background: #FFFFFF;
					border-radius: 6rpx;
				}
				.imgs{
					width: 72rpx;
					height: 72rpx;
					border-radius:50%;
					margin-top:33rpx;
					}
				.name{
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					font-style: normal;
					text-transform: none;
				}
				.maxw{
					max-width: 80rpx;
				}
			}
			
			.info{
				width: 610rpx;
				height: auto;
				// min-height: 228rpx;
				// background-color: red;
				// background-image: url("@/static/images/tlbj2.png");
				// background-size: 105rpx 43rpx;
				// background-repeat: no-repeat;
				// background-color: red;
				position: relative;
				margin-left: 17rpx;
				// background-color: pink;
				// box-shadow: 0  0 10rpx 5rpx rgba(0,0,0,0.1);
				
				.tlbj{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					// box-shadow: 0px 0px 20px 1px rgba(148,167,204,0.16);
				}
				.infos{
					// box-shadow: 0px 0px 20px 1px rgba(148,167,204,0.16);
					padding:24rpx 37rpx;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
					color: #999999;
					border-radius: 10rpx;
					
					.names{
						
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.bttom{
						margin-top: 48rpx;
					
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						.zt{
							margin-left: auto;
							color:#29BE9E;
						}
						.pf{
							margin-left: auto;
							color: #145EFD;
						}
					}
				}
			}
			.zt{
				margin-left: auto;
				color:#29BE9E;
			}
			.pf{
				margin-left: auto;
				color: #145EFD;
			}
			.shadow{
				box-shadow: 0px 0px 20px 1px rgba(148,167,204,0.16);
			}
			.items{
				align-items: center;
				width: 100%;
				height: 132rpx;
				padding: 26rpx 24rpx;
				.users{
					display: flex;
					align-items: center;
					margin-right: 16rpx;
					// width: 310rpx;
					.maxs{
						width: 320rpx;
					}
					
				}
				.checkimg{
					
					width: 36rpx;
					height: 36rpx;
					background: #FFFFFF;
					border-radius: 6rpx;
				}
				.imgs{
					width: 72rpx;
					height: 72rpx;
					border-radius:50%;
					margin: 0 32rpx 0 24rpx;
					}
				.name{
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					width: 180rpx;
				}
				.time{
					width: 200rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.score{
					margin-left: auto;
				}
			}
			
		}
	}
	.zy_picker4_0_ibhf {
		background-color: #ffffff;
	    padding: 0rpx 32rpx 0rpx 32rpx;
	    line-height: 88rpx;
	    border-bottom: 1px solid #eee;
	
	    .zy_picker4_0_c0_ibhf {
	        color: var(--benbenFontColor2);
	    }
	
	    .zy_picker4_0_c1_ibhf {
	        color: var(--benbenFontColor0);
	    }
	
	    .zy_picker4_0_c2_ibhf {
	        color: var(--benbenFontColor4);
	    }
	}
	.list_flex_2_ibhf {
		width: 750rpx;
		height: 84rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(84rpx + var(--window-bottom));
	
		.list_fd2_0_ibhf {
			border-radius: 12rpx;
			width: 702rpx;
			line-height: 84rpx;
			font-size: 24rpx;
			background: #4781f5;
			color: #fff;
		}
	}
	.people_flex_3_ibhf {
		width: 622rpx;
		// margin: 0rpx 0rpx 0rpx 64rpx;
	
		.people_fd3_0_ibhf {
			background: #FFFFFF;
			width: 622rpx;
			height: 530rpx;
			border-radius: 16rpx;
	
			.people_fd3_0_c0_ibhf {
				margin: 48rpx 0rpx 48rpx 0rpx;
	
				.people_fd3_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
				}
			}
	
			.people_fd3_0_c3_ibhf {
				color: var(--benbenFontColor3);
				font-size: 32rpx;
				margin-top: 100rpx;
	
				.people_fd3_0_c3_c0_ibhf {
					background: #F4F8FD;
					width: 240rpx;
					height: 88rpx;
					margin: 0rpx 44rpx 0rpx 0rpx;
					border-radius: 44rpx;
					color: rgba(20, 94, 253, 1);
					font-size: 32rpx;
				}
	
				.people_fd3_0_c3_c1_ibhf {
					background: #145EFD;
					width: 240rpx;
					height: 88rpx;
					border-radius: 44rpx;
					color: #fff;
				}
			}
	
			.people_fd3_0_c1_ibhf {
				border: 1px solid #F2F4F7;
				background: #F6F7FA;
				width: 526rpx;
				height: 84rpx;
				margin: 0rpx 0rpx 24rpx 0rpx;
				border-radius: 12rpx;
				padding: 0 24rpx;
			}
		}
	}
	.jf_flex_2_ibhf {
	    width: 750rpx;
	    height: 190rpx;
	    overflow: hidden;
	    z-index: 10;
	    bottom: calc(0rpx + var(--window-bottom));
	    background: #FFFFFF;
	    box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
	    padding: 0 24px;
	
	    .jf_fd2_0_c0_ibhf {
	        width: 36rpx;
	        height: 36rpx;
	        border-radius: 0rpx;
	        margin: 0rpx 12rpx 0rpx 0rpx;
	    }
	
	    .jf_fd2_0_c1_ibhf {
	        color: #666666;
	        font-size: 28rpx;
	        font-weight: 400;
	        line-height: 40rpx;
	        text-align: left;
	        font-style: normal;
	    }
		.checknum{
			
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #1C5EFC;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	
	    .jf_fd2_1_ibhf {
	        border-radius: 42rpx;
	        width: 257rpx;
	        line-height: 84rpx;
	        font-size: 24rpx;
	        background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
	        color: #fff;
	        height: 84rpx;
	        margin: 0rpx 0rpx 0rpx auto;
	    }
		.jf_fd2_1_ibhf1{
			width: 256rpx;
			height: 84rpx;
			background: #FFFFFF;
			border-radius: 42rpx;
			border: 1px solid #145EFD;
			color: #145EFD;
			font-size: 32rpx;
		}
	}
	.select-item {
		margin: 52rpx 0;
	
		.item-name {
			font-weight: 400;
			font-size: 32rpx;
			color: #090909;
			line-height: 46rpx;
		}
		.MyPortrayal_fd1_7_c1_c0_c1_c0 {
			background: #EEF1F9;
			width: 520rpx;
			height: 28rpx;
			border-radius: 14rpx;
			background-size: 100% auto;
		
			.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
				background: linear-gradient(90deg, #1D54F7 0%, #17A4FC 100%);
				border-radius: 14rpx;
			}
			.yuan {
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				border: 2rpx solid #E4E4E8;
				border-radius: 40rpx;
			}
		
		}
	}
	.cstitle{
		margin-top: 56rpx;
		.cstop{
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding:0 24rpx;
			.number{
				
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				text-align: right;
				font-style: normal;
				text-transform: none;
			}
			.type{
				color: #ffffff;
				font-size: 20rpx;
				width: 64rpx;
				height: 36rpx;
				background: #145EFD;
				border-radius: 8rpx;
				text-align: center;
				line-height: 36rpx;
				margin-left: 16rpx;
			}
		}
		.csname{
			width: 100%;
			padding: 0 24rpx;
			margin: 24rpx 0;
			margin-top: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.left{
			padding: 0 24rpx;
			margin-left: 24rpx;
			width: 702rpx;
			height: 64rpx;
			background: #FBFBFB;
			border-radius: 8rpx;
			align-items: center;
			.fb_fd4_0_c2_ibhf{
				font-size: 20rpx;
				color: #145EFD;
			}
		}
	}
	.daan{
		padding: 0 24rpx;
		color: #29BE9E;
		align-items: center;
	}
	.imhs{
		width: 100%;
		text-align: center;
		image{
			margin-top: 120rpx;
			width: 496rpx;
			height: 296rpx;
		}
		view{
			margin-top: 20rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 35rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>
